
<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                         <el-row>
                             <!-- 操作人 -->
                             <el-col :span="5">
                                <el-form-item :label="$t('Operatelog.queryLabel.username')"   :label-width="queryformLabelWidth">
                                    <el-input v-model.trim="formQueryCondition.username.val" class="queryItemStyle" clearable
                                            :placeholder="$t('Operatelog.queryLabel.placeholderUsername')">
                                    </el-input>
                                </el-form-item>
                             </el-col>
                             <!-- 业务名称 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('Operatelog.queryLabel.modifyobject')"   :label-width="queryformLabelWidth">
                                    <!-- <el-input v-model.trim="formQueryCondition.modifyobject.val" class="queryItemStyle" clearable
                                            :placeholder="$t('Operatelog.queryLabel.placeholderModifyobject')">
                                    </el-input> -->
                                    <el-select v-model="formQueryCondition.modifyobject.val" filterable allow-create default-first-option class="queryItemStyle">
                                    <el-option :label="$t('label.all')" value=""></el-option>
                                    <el-option :value="drug" :key="drug" :label="drug" v-for="drug in modifyobjects"></el-option>
                                </el-select>
                                </el-form-item>
                             </el-col>
                             <!-- 操作类型 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('Operatelog.queryLabel.modifyname')"   :label-width="queryformLabelWidth">
                                    <!-- <el-input v-model="formQueryCondition.modifyname.val" class="queryItemStyle" clearable
                                            :placeholder="$t('Operatelog.queryLabel.placeholderModifyname')">
                                    </el-input> -->
                                    <el-select v-model="formQueryCondition.modifyname.val" filterable allow-create default-first-option class="queryItemStyle">
                                    <el-option :label="$t('label.all')" value=""></el-option>
                                    <el-option :value="drug" :key="drug" :label="drug" v-for="drug in modifynames"></el-option>
                                </el-select>
                                </el-form-item>
                             </el-col>
                             <!-- 详情 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('Operatelog.queryLabel.modifycontent')"   :label-width="queryformLabelWidth">
                                    <el-input v-model="formQueryCondition.modifycontent.val" class="queryItemStyle" clearable :placeholder="$t('Operatelog.queryLabel.placeholderModifycontent')">
                                    </el-input>
                                </el-form-item>
                             </el-col>
                         </el-row>
                         <el-row>
                             <!-- 操作时间起 -->
                             <el-col :span="5">
                                 <el-form-item :label="$t('Operatelog.queryLabel.startTime')" :label-width="queryformLabelWidth" >
                                    <el-date-picker v-model.trim="formQueryCondition.startTime.val" class="queryItemStyle"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    clearable :placeholder="$t('queryLabel.selectOp')" type="date" >
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                             <!-- 至 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('Operatelog.queryLabel.endTime')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.endTime.val" class="queryItemStyle"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    clearable :placeholder="$t('queryLabel.selectOp')" type="date" >
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                         </el-row>
                    
                        <!-- 菜单按钮 -->
                        <el-row>
                            <el-col :span="24">
                                <div style="text-align:right">
                                    <el-form-item>
                                        <!-- 重置 -->
                                        <el-button v-permission="{menuCode: menuCode, resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                                        <!-- 导出-->
                                       <el-button  v-permission="{menuCode: menuCode, resourceCode: 'exportBtnText'}" type="primary" @click="exportLog('exportBtnText')" icon="el-icon-download" :loading="loading">{{ $t('btnText.exportBtnText') }}</el-button>
                                        <!-- 查询 -->
                                        <el-button v-permission="{menuCode: menuCode, resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <el-table-column type="index"  width="50" fixed="left"
                                            :label="$t('table.xh')" align="center">
                        </el-table-column>
                        <el-table-column :label="$t('table.op')" fixed="left" min-width="80">
                            <template slot-scope="scope">
                                <!-- 详情 -->
                                <el-button v-permission="{menuCode:menuCode,resourceCode:'detailsBtnText'}" size="gv" icon="el-icon-edit" :loading="loading"
                                    @click="onDetails(scope.$index, scope.row)" >{{ $t('Operatelog.btnText.detailBtnText') }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="username" min-width="120"
                                            :label="$t('Operatelog.table.username')" sortable="custom" sort-by="username">
                        </el-table-column>
                        <el-table-column prop="modifyip" min-width="110"
                                            :label="$t('Operatelog.table.modifyip')" sortable="custom" sort-by="modifyip">
                        </el-table-column>
                        <el-table-column prop="modifyobject" min-width="120"
                                            :label="$t('Operatelog.table.modifyobject')" sortable="custom" sort-by="modifyobject">
                        </el-table-column>
                        <el-table-column prop="modifyname" min-width="120"
                                            :label="$t('Operatelog.table.modifyname')" sortable="custom" sort-by="modifyname">
                        </el-table-column>
                        <el-table-column prop="createdDate" min-width="160"
                                            :label="$t('Operatelog.table.modifyDate')" sortable="custom" sort-by="createdDate">
                        </el-table-column>
                        <el-table-column prop="modifyTime" min-width="100"
                                            :label="$t('Operatelog.table.modifyTime')" sortable="custom" sort-by="modifyTime">
                        </el-table-column>
                        <el-table-column :label="$t('Operatelog.table.modifycontent')" min-width="350" sortable="custom" prop="modifycontent" sort-by="modifycontent" :formatter="formatter">
                        </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>


        <!-- 查看详情 -->
        <el-dialog :title="$t('Operatelog.label.details')" :visible.sync="isShowInfoForm" top="5vh" :close-on-click-modal="false">
            <div class="main">
                <el-row class="datarow bgrow">
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.username') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.username }}</el-col>
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.modifyip') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.modifyip }}</el-col>
                </el-row>
                <el-row class="datarow">
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.modifyobject') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.modifyobject }}</el-col>
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.modifyname') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.modifyname }}</el-col>
                </el-row>
                <el-row class="datarow bgrow">
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.modifyDate') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.createdDate }}</el-col>
                    <el-col class="labcol" :span="labelSpan">{{ $t('Operatelog.table.modifyTime') + ":"  }}</el-col>
                    <el-col class="datacol" :span="dataSpan">{{ datas.modifyTime }}</el-col>
                </el-row>
                <el-row class="datarow">
                    <el-col class="labcol" :span="3">{{ $t('Operatelog.table.modifycontent') + ":"  }}</el-col>
                    <el-col class="datacol" :span="21" style="white-space: pre-wrap;">{{ datas.modifycontent }}</el-col>
                </el-row>
            </div>

        </el-dialog>

  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'Operatelog',
  props: {
    menuCode: String
  },
  data () {

    return {
        queryformLabelWidthLong:"100px",
        labelSpan:3,
        dataSpan:9,
        isInit:false,
        isShowInfoForm: false,
        tableHeight:100,
        modifynames:[],
        modifyobjects:[],
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"com.ispr.logs.entity.Operatelog",
        datas:Object,
        // 查询条件
        formQueryCondition: {
            username: {
              key:'username',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            modifyobject: {
              key:'modifyobject',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            modifyname: {
              key:'modifyname',
              op: 'LIKE', // 操作符
              val: '' // 查询的值
            },
            modifycontent:{
              key:'modifycontent',
              op:'LIKE',
              val:''
            },
            startTime: {
              key:'createdDate',
              group:'startTime',
              val: '', // 查询的值
              op:'>=',
              group: 'startTime'
            },
            endTime: {
              key:'createdDate',
              group:'endTime',
              val: '', // 查询的值
              op:'<=',
              group: 'endTime'
            },
        },

        // 排序对象
        sort: {
            key: "createdDate",
            dir: "Desc"
        },

    }
  },
  methods:{
      //格式化表格数据
      formatter:function(row, column, cellValue, index){
          if(cellValue!=null && cellValue!="" && cellValue.length>15){
              return cellValue.substr(0, 40)+"...";
          }
          return cellValue;
      },

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.username.val = "";
        this.formQueryCondition.modifyobject.val = "";
        this.formQueryCondition.modifyname.val = "";
        this.formQueryCondition.modifycontent.val = "";
        this.formQueryCondition.startTime.val = "";
        this.formQueryCondition.endTime.val = "";
    },

    //详情按钮事件
    onDetails: function(index, row){
        this.queryModelByKeyID(this.modelName,row.keyId,"Query",this.showDetails);
    },
    // 详情按钮回调事件
    showDetails: function(isSuccess,json) {
        if(isSuccess){
            this.isShowInfoForm = true;
            this.datas=json;

        }
    },

    exportLog:function exportLog (rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      let param = { 'className': 'com.ispr.logs.entity.Operatelog', 'opKey': 'Export', 'params':this.queryObjToArray(this.formQueryCondition),'fileName': '业务日志信息' };
      let fileName = '业务日志信息' + '.xlsx';
      this.downloadByIdOrName(this, '/file/export', 'param', JSON.stringify(param), fileName);
    },

    initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
    enterDown(){
      var g = this
      if(!g.loading){
        g.onQuery()
      }
    },
    //获取 业务日志所有操作类型名称
    findAllModifyname: function() {
        var _this = this;
        var queryRequest = {};
        this.axios.post('/api/sys/findAllModifyname', queryRequest, {headers: this.headersObj})
            .then(function(res) {
                if (res.data.code == "SUCCESS") {
                    _this.modifynames = [];
                    for (var i = 0; i < res.data.data.length; i++) {
                        _this.modifynames.push(res.data.data[i]);
                    }
                } else {
                    _this.$message.error(res.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
                _this.$message.error(error);
            });
    },
    //获取 业务日志所有操作对象
    findAllModifyobject: function() {
        var _this = this;
        var queryRequest = {};
        this.axios.post('/api/sys/findAllModifyobject', queryRequest, {headers: this.headersObj})
            .then(function(res) {
                if (res.data.code == "SUCCESS") {
                    _this.modifyobjects = [];
                    for (var i = 0; i < res.data.data.length; i++) {
                        _this.modifyobjects.push(res.data.data[i]);
                    }
                } else {
                    _this.$message.error(res.data.msg);
                }
            })
            .catch(function(error) {
                console.log(error);
                _this.$message.error(error);
            });
    },


  },
  mounted: function mounted() {
    this.findAllModifyname();
    this.findAllModifyobject();
    this.onQuery();
    window.setTimeout(this.initTable,100);
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
    height: 100%;
    width: 100%;
    font-size: 14px;
    color: #333333;
    font-family:"Microsoft YaHei";

}
.datarow {
    border: 1px solid #eeeeee;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.titlecol{
    font-weight: bold;
}

.labcol {
padding: 3px 3px 3px 5px;
border-radius: 4px;
font-size: 14px;
text-align:right;
border-right: 1px solid #eeeeee;
}

.datacol {
padding: 3px 3px 3px 3px;
border-radius: 0px;
text-align:left;

vertical-align: middle;
border-right: 1px solid #eeeeee;
}

.bgrow{
    background-color: #d4f1ff;
}

</style>

